import React, { useEffect, useState } from 'react';
import { Table, Button, Modal, Form, Input, Select, DatePicker, message, Row, Col } from 'antd';
import userApi from '../api/api'; // 引入封装好的 API
import moment from 'moment'; // 引入moment用于日期格式化

const UserManagement = () => {
    const [users, setUsers] = useState([]); // 用户列表
    const [isModalVisible, setIsModalVisible] = useState(false); // 控制弹窗
    const [editingUser, setEditingUser] = useState(null); // 当前编辑的用户
    const [form] = Form.useForm(); // 弹窗表单实例
    const [searchForm] = Form.useForm(); // 搜索表单实例
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0, // 总数据量
    }); // 分页数据

     // 获取用户列表
     const fetchUsers = async (filters = {}, page = pagination.current, pageSize = pagination.pageSize) => {
        try {
            const res = await userApi.getUsers({
                ...filters,
                page,       // 当前页码
                pageSize,   // 每页显示的条数
            });

            // 打印返回的数据，查看结构
            console.log(res);

            // 正确处理返回的数据结构
            if (res && res.data && res.data.data && Array.isArray(res.data.data)) {
                const formattedData = res.data.data.map(user => ({
                    ...user,
                    birthday: user.birthday ? moment(user.birthday) : null,
                }));

                setUsers(formattedData);
                setPagination(res.data.pagination);
            } else {
                console.error('返回的数据格式不正确');
                message.error('返回的数据格式不正确');
            }
        } catch (err) {
            console.error('获取用户数据失败', err);
            message.error('获取用户数据失败');
        }
    };

    useEffect(() => {
        fetchUsers(); // 初次加载用户数据
    }, []); // 仅在组件加载时获取一次数据

    // 搜索用户
    const handleSearch = () => {
        const values = searchForm.getFieldsValue();
        setPagination({ ...pagination, current: 1 }); // 搜索时重置分页为第一页
        fetchUsers(values, 1, pagination.pageSize);  // 请求第一页数据
    };

    // 重置搜索
    const handleReset = () => {
        searchForm.resetFields();
        setPagination({ ...pagination, current: 1 }); // 重置时重置分页为第一页
        fetchUsers({}, 1, pagination.pageSize);  // 请求第一页数据
    };

    // 新增/修改用户
    const handleSave = async (values) => {
        try {
            // 如果是编辑用户，将日期格式化为字符串
            if (values.birthday) {
                values.birthday = values.birthday.format('YYYY-MM-DD');
            }

            if (editingUser) {
                await userApi.updateUser(editingUser.user_id, values);
                message.success('用户信息更新成功');
            } else {
                await userApi.addUser(values);
                message.success('用户添加成功');
            }
            fetchUsers({}, pagination.current, pagination.pageSize); // 请求当前页数据
            setIsModalVisible(false);
            setEditingUser(null);
            form.resetFields();
        } catch (err) {
            message.error('操作失败');
        }
    };

    // 删除用户
    const handleDelete = async (id) => {
        Modal.confirm({
            title: '确认删除该用户吗?',
            onOk: async () => {
                try {
                    await userApi.deleteUser(id);
                    message.success('用户删除成功');
                    fetchUsers({}, pagination.current, pagination.pageSize); // 请求当前页数据
                } catch (err) {
                    message.error('删除失败');
                }
            }
        });
    };

    // 打开编辑弹窗
    const handleEdit = (user) => {
        setEditingUser(user);
        setIsModalVisible(true);
        form.setFieldsValue({
            ...user,
            birthday: user.birthday ? moment(user.birthday) : null // 格式化日期为moment对象
        });
    };

    const renderRoles = (roles) => {
        const roleMap = {
          '0': '普通用户',
          '1': '管理员',
          '2': '经理',
          '3': '开发者'
        };
        // 检查roles是否为null或者undefined，如果是，则返回一个空字符串
        if (!roles) return '';
        // 使用roles.split(',')来分割角色字符串，并使用map来转换为对应的角色名称
        return roles.split(',').map(role => roleMap[role] || '未知').join(', ');
      };

    const columns = [
        { title: 'ID', dataIndex: 'user_id' },
        { title: '用户名', dataIndex: 'user_name' },
        { title: '手机号', dataIndex: 'phone' },
        { title: '角色', dataIndex: 'roles', render: renderRoles },
        {
            title: '生日',
            dataIndex: 'birthday',
            render: (birthday) => birthday ? moment(birthday).format('YYYY-MM-DD') : '-',
        },
        {
            title: '操作',
            render: (_, record) => (
                <>
                    <Button onClick={() => handleEdit(record)}>编辑</Button>
                    <Button danger onClick={() => handleDelete(record.user_id)} style={{ marginLeft: 10 }}>
                        删除
                    </Button>
                </>
            ),
        },
    ];

    // 分页变化时处理
    const handlePageChange = (page, pageSize) => {
        setPagination({ ...pagination, current: page, pageSize });
        fetchUsers({}, page, pageSize);  // 请求指定页的数据
    };

    return (
        <div>
            <h1>用户管理</h1>
            <Form form={searchForm} layout="inline" style={{ marginBottom: 20 }}>
                <Row gutter={16}>
                    <Col>
                        <Form.Item name="user_name" label="用户名">
                            <Input placeholder="输入用户名" />
                        </Form.Item>
                    </Col>
                    <Col>
                        <Form.Item name="phone" label="手机号">
                            <Input placeholder="输入手机号" />
                        </Form.Item>
                    </Col>
                    <Col>
                        <Button type="primary" onClick={handleSearch}>搜索</Button>
                        <Button onClick={handleReset} style={{ marginLeft: 10 }}>重置</Button>
                    </Col>
                </Row>
            </Form>

            <Button type="primary" onClick={() => setIsModalVisible(true)} style={{ marginBottom: 10 }}>
                新增用户
            </Button>

            <Table
                dataSource={users}
                columns={columns}
                rowKey="user_id"
                pagination={{
                    current: pagination.current,
                    pageSize: pagination.pageSize,
                    total: pagination.total,
                    onChange: handlePageChange,
                    showSizeChanger: true, // 可选择每页显示多少条
                    pageSizeOptions: ['10', '20', '30', '40'],
                    showTotal: (total) => `共 ${total} 条`,
                }}
            />

            <Modal
                title={editingUser ? '编辑用户' : '新增用户'}
                open={isModalVisible}
                onCancel={() => setIsModalVisible(false)}
                onOk={() => form.submit()}
            >
                <Form form={form} layout="vertical" onFinish={handleSave}>
                    <Form.Item name="user_name" label="用户名" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="phone" label="手机号" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="roles" label="角色" rules={[{ required: true }]}>
                        <Select mode="multiple" placeholder="选择角色,只能选择一个">
                            <Select.Option value="0">普通用户</Select.Option>
                            <Select.Option value="1">管理员</Select.Option>
                            <Select.Option value="2">经理</Select.Option>
                            <Select.Option value="3">开发者</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="birthday" label="生日">
                        <DatePicker format="YYYY-MM-DD" />
                    </Form.Item>
                    <Form.Item name="password" label="密码" rules={[{ required: !editingUser, message: '请输入密码' }]}>
                        <Input.Password />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default UserManagement;
